<template>
  <div class="hotel-container">
    <h2>酒店预订系统</h2>

    <!-- 搜索区域 -->
    <div class="search-bar">
      <input v-model="searchParams.hotelName" placeholder="酒店名称" />
      <input v-model="searchParams.city" placeholder="城市" />
      <button @click="searchHotels">搜索</button>
    </div>

    <!-- 酒店列表 -->
    <el-table :data="hotels" border stripe>
      <el-table-column prop="hotelName" label="酒店名称"></el-table-column>
      <el-table-column prop="city" label="城市"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="pricePerNight" label="价格（每晚）"></el-table-column>
      <el-table-column prop="availability" label="是否可用">
        <template #default="{ row }">
          {{ row.availability ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="bookHotel(row)">预订</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 预订对话框 -->
    <el-dialog v-model="dialogVisible" title="填写预订信息">
      <el-form :model="bookingForm" label-width="120px">
        <el-form-item label="入住日期">
          <el-date-picker v-model="bookingForm.checkInDate" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="退房日期">
          <el-date-picker v-model="bookingForm.checkOutDate" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="总价">
          <el-input-number v-model="bookingForm.totalPrice" :disabled="true" />
        </el-form-item>
        <el-button type="primary" @click="submitBooking">提交预订</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from '../../axios/request'

const hotels = ref([])
const searchParams = ref({
  hotelName: '',
  city: ''
})

const dialogVisible = ref(false)
const selectedHotel = ref(null)
const bookingForm = ref({
  checkInDate: null,
  checkOutDate: null,
  totalPrice: 0
})

// 获取所有酒店数据
const fetchHotels = async () => {
  try {
    const res = await axios.get('/hotels')
    hotels.value = res.data.data
  } catch (error) {
    console.error('获取酒店失败:', error)
  }
}

// 搜索酒店
const searchHotels = async () => {
  try {
    const res = await axios.get('/hotels', {
      params: {
        HotelName: searchParams.value.hotelName,
        City: searchParams.value.city
      }
    })
    hotels.value = res.data.data
  } catch (error) {
    console.error('搜索酒店失败:', error)
  }
}

// 打开预订弹窗
const bookHotel = (hotel) => {
  selectedHotel.value = hotel
  dialogVisible.value = true
}

// 提交预订
const submitBooking = async () => {
  if (!bookingForm.value.checkInDate || !bookingForm.value.checkOutDate) {
    alert("请选择入住和退房日期")
    return
  }

  const days = Math.ceil((new Date(bookingForm.value.checkOutDate) - new Date(bookingForm.value.checkInDate)) / (1000 * 60 * 60 * 24))
  bookingForm.value.totalPrice = selectedHotel.value.pricePerNight * days

  const payload = {
    userID: 1, // 假设当前登录用户ID为1
    hotelID: selectedHotel.value.hotelID,
    checkInDate: bookingForm.value.checkInDate,
    checkOutDate: bookingForm.value.checkOutDate,
    totalPrice: bookingForm.value.totalPrice,
    status: 'Confirmed'
  }

  try {
    await axios.post('/bookings', payload)
    alert("预订成功！")
    dialogVisible.value = false
    bookingForm.value = {
      checkInDate: null,
      checkOutDate: null,
      totalPrice: 0
    }
  } catch (error) {
    console.error('预订失败:', error)
    alert("预订失败，请重试")
  }
}

onMounted(() => {
  fetchHotels()
})
</script>

<style scoped>
.hotel-container {
  padding: 20px;
}
.search-bar {
  margin-bottom: 20px;
}
.search-bar input {
  width: 200px;
  margin-right: 10px;
  padding: 8px;
}
</style>